<template>
  <el-dialog
    title="考试设置"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="700px"
    append-to-body
    @close="close"
  >
    <el-row :gutter="0" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="mini"
        label-width="140px"
        label-position="right"
        :disabled="!!isDetail"
      >
        <!-- <el-form-item label="封面图" prop="volumestyle">
          <JADP-UploadImg
            v-model="dataForm.volumestyle"
            :fileSize="20"
            sizeUnit="MB"
            :limit="1"
            showTip
          >
          </JADP-UploadImg>
          <div>尺寸建议为3:2</div>
        </el-form-item> -->

        <!-- <el-col :span="10">
          <el-form-item label="考试时长：分" prop="fen">
            <el-input-number
              v-model="dataForm.fen"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="12">
          <el-form-item label="秒" prop="miao">
            <el-input-number
              v-model="dataForm.miao"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="及格分" prop="passinggrade">
            <el-input-number
              v-model="dataForm.passinggrade"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="练习模式" prop="practicemode">
            <el-switch v-model="dataForm.practicemode" active-value="true">
            </el-switch>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="考试时间" prop="testtime">
            <el-switch v-model="dataForm.testtime" active-value="true">
            </el-switch>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="考试开始时间" prop="teststart">
            <el-date-picker
              v-model="dataForm.teststart"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="考试结束时间" prop="testend">
            <el-date-picker
              v-model="dataForm.testend"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              type="datetime"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="timestamp"
            >
            </el-date-picker>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="禁止终端" prop="prohibitterminal">
            <el-checkbox-group v-model="prohibitterminal" size="small">
              <el-checkbox
                v-for="(item, index) in prohibitterminalOptions"
                :key="index"
                :label="item.id"
                :disabled="item.disabled"
              >
                {{ item.fullName }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="防切屏" prop="anticuttingscreen">
            <el-switch v-model="dataForm.anticuttingscreen" active-value="true">
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="允许最大切屏次数"
            prop="cameramonitoringtimes"
            v-if="dataForm.anticuttingscreen.toString() === 'true'"
          >
            <el-input-number
              v-model="dataForm.cameramonitoringtimes"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="抓拍" prop="cameramonitoring">
            <el-switch v-model="dataForm.cameramonitoring" active-value="true">
            </el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="抓拍间隔时间：分"
            prop="cameramonitoringtime"
            v-if="dataForm.cameramonitoring.toString() === 'true'"
          >
            <el-input-number
              v-model="dataForm.cameramonitoringtime"
              placeholder="数字文本"
              :step="1"
            >
            </el-input-number>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item label="麦克风监控" prop="microphonemonitoring">
            <el-switch
              v-model="dataForm.microphonemonitoring"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col> -->

        <el-col :span="24">
          <el-form-item label="人脸识别" prop="cameramonitorsrrealtime">
            <el-switch
              v-model="dataForm.cameramonitorsrrealtime"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="24">
          <el-form-item
            label="考试屏幕实时监控"
            prop="realtimescreenmonitoring"
          >
            <el-switch
              v-model="dataForm.realtimescreenmonitoring"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item
            label="第三视角摄像头实时监控"
            prop="thirdcamerarealtimemonitoring"
          >
            <el-switch
              v-model="dataForm.thirdcamerarealtimemonitoring"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="禁用多屏" prop="disablemultiscreen">
            <el-switch
              v-model="dataForm.disablemultiscreen"
              active-value="true"
            >
            </el-switch>
          </el-form-item>
        </el-col> -->

        <!-- <el-col :span="24">
          <el-form-item label="简答题是否启用上传文件" prop="whetheruploadfile">
            <el-switch v-model="dataForm.whetheruploadfile" active-value="true">
            </el-switch>
          </el-form-item>
        </el-col> -->
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import { previewDataInterface } from "@/api/systemData/dataInterface";
import ExportBox from "./ExportBox";
export default {
  name: "DataInterface",
  components: { ExportBox },
  props: ["totalScore", "id"],
  data() {
    return {
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      dataForm: {
        creatoruserid: "",
        lastmodifyuserid: "",
        creatortime: "",
        lastmodifytime: "",
        fen: undefined,
        miao: undefined,
        passinggrade: undefined,
        practicemode: 0,
        cameramonitoringtime: undefined,
        testtime: 0,
        teststart: undefined,
        testend: undefined,
        prohibitterminal: "",
        anticuttingscreen: 0,
        cameramonitoring: 0,
        microphonemonitoring: 0,
        cameramonitorsrrealtime: 0,
        realtimescreenmonitoring: 0,
        thirdcamerarealtimemonitoring: 0,
        disablemultiscreen: 0,
        whetheruploadfile: 0,
        paperid: ""
        // volumestyle: []
      },
      rules: {},
      prohibitterminalOptions: [],
      prohibitterminal: [],
      addFlag: true
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getprohibitterminalOptions();
    // console.log(this.id, 222222);
    // this.init(this.id);
  },
  mounted() {},
  methods: {
    getprohibitterminalOptions() {
      getDictionaryDataSelector("611b5df6bffb433d9da3b32499c31c47").then(
        res => {
          this.prohibitterminalOptions = res.data.list;
        }
      );
    },
    init(id, isDetail) {
      // this.prohibitterminal = [];
      this.dataForm.paperid = id;
      // this.visible = true;
      // this.$nextTick(() => {
      this.loading = true;
      request({
        url: "/api/examinationsetting/Xy_ks_examinationsetting/" + id,
        method: "get"
      }).then(res => {
        // console.log(res, "++++++++++++++++++++++++++++++++++++++++++++++++");
        if (res.msg == "Success") {
          this.dataForm = res.data;
          // console.log(this.dataForm, 11);
          this.prohibitterminal = this.dataForm.prohibitterminal
            ? this.dataForm.prohibitterminal.split(",")
            : [];
          // this.dataForm.volumestyle = this.dataForm.volumestyle
          //   ? this.dataForm.volumestyle
          //   : [];
          this.loading = false;
        } else {
          this.addFlag = false;
        }
      });
      // });
    },
    // 表单提交
    dataFormSubmit() {
      if (this.totalScore < this.dataForm.passinggrade)
        return this.$message.warning("及格分不能大于试卷总分");
      this.dataForm.prohibitterminal = this.prohibitterminal.join(",");
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (!this.addFlag) {
            request({
              url: `/api/examinationsetting/Xy_ks_examinationsetting`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000
              });
              this.visible = false;
              this.$emit("refresh", true);
            });
          } else {
            request({
              url:
                "/api/examinationsetting/Xy_ks_examinationsetting/" +
                this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    },
    close() {
      // this.$refs.elForm.resetFields();
    }
  }
};
</script>

<style scoped lang="scss">
.inline-block {
  float: right;
}
</style>
